/*
* @Author: Yangrui
* @Date: 2023-05-31 10:29:48
* @LastEditors: Yejing
* @LastEditTime: 2023-05-31 16:59:59
* @Description: 修改视频上传页面样式引入公共组件更改布局
*/
<template>
	<view class="upload-media-page">
		<!-- 头部 -->
		<!-- <c-layout @contentScroll="contentScroll"> -->
		<!-- :title="search.title" :navType="search.navType" :navThmen="search.navThmen" :navBottomBorder="false" -->
		<c-navigation-bar :title="search.title"></c-navigation-bar>
		<view class="box">
			<view class="video-view">
				<view style='margin-bottom: 10rpx;'>{{$t('media.Video')}}</view>
				<view class="video-card">
					<view v-if="videoLocalPath" class="video-play">
						<video :style="`position: relative;top:-${videoScrollTop}rpx;`" id="upload-video" class="video"
							:src="videoLocalPath" :controls="!uploading"></video>
						<cover-view class="icon" @click="deletevideo">
							<cover-image src="@/static/svg/delete.svg" width="44rpx" height="44rpx"></cover-image>
						</cover-view>
						<!-- <view class="icon" @click="deletevideo">
								<u-icon name="trash-fill" color="rgb(225, 228, 232)" size="44"></u-icon>
							</view> -->
					</view>
					<view class="uploaddiv" v-else @click="videoChoose">
						<image src="@/static/images/shortVideo/upload.png" class="upload">
						</image>
					</view>
				</view>
			</view>
			<view class="video-tag">
				<view class="tag" v-for="(item,index) in videoType.list.filter(f=>f.checked)" :key="index"
					type="default">{{item.name}}
				</view>
				<view class="tag" type="dotted" @click="typeShow = true">+ 添加标签</view>
			</view>
			<view class="text-area">
				<view class="saySomeThing">
					<text>{{ $t('media.SaySomeThing') }}</text>
					<u-input v-model="desc" :maxlength="140" placeholder="" type="textarea" :height="140" />
				</view>
			</view>
			<view class="product-box" v-if="cList.length">
				<view class="product" v-for="item in cList" :key="item.id">
					<view class="left">
						<u-image :src="$u.file.getMedieUrl(item.image)" width="160rpx" height="154rpx"></u-image>
						<view class="text">
							<view class="name remove">{{ item.goodsName }}</view>
							<view class="intro remove">{{ item.goodsDesc }}</view>
						</view>
					</view>
					<u-button @click="cancel(item)" :throttle-time="0">{{$t('system.cancel')}}</u-button>
				</view>
			</view>
			<view class="button-b">
				<u-button type="primary" :loading="uploading" :disabled="uploading"
					@click="submit">{{ $t('media.upload') }}</u-button>
			</view>
			<!--  #ifdef APP-PLUS -->
			<view class="button-b">
				<u-button type="primary" @click="videoRecord"><u-icon name="camera"
						style="margin-right: 10rpx;"></u-icon>{{$t('media.record')}}</u-button>
			</view>
			<!--  #endif -->
			<view class="button-b" v-if="$store.getters.userStatus.isStorekeeper">
				<u-button type="primary" @click="productPopup = true"
					:throttle-time="0">{{$t('media.chooseProducts')}}</u-button>
			</view>
			<!-- 选择上商品-->
			<u-popup v-model="productPopup" closeable mode="bottom" height="56%" safe-area-inset-bottom
				:border-radius="35">
				<view class="product-popup">
					<view class="select">
						<u-button type="primary" size="mini" @click="allCheck"
							style="margin-right: 20rpx">{{$t('storeManagement.CheckAll')}}</u-button>
						<u-button :throttle-time="0" type="success" size="mini"
							@click="addGoods">{{$t('system.affirm')}}</u-button>
					</view>
					<view class="check-box" v-for="(item,index) in shopProductData.list" :key="item.id">
						<u-checkbox v-model="item.check" :name="item.id"></u-checkbox>
						<view class="product">
							<u-image width="176rpx" height="176rpx" :src="$u.file.getMedieUrl(item.image)"></u-image>
							<view class="right">
								<view>
									<view class="name remove">{{ item.goodsName }}</view>
									<view class="intro remove">{{ item.goodsDesc }}</view>
								</view>
								<text class="price">${{ item.price }}</text>
							</view>
						</view>
					</view>
					<view style="flex: 1;display: flex;align-items: center;justify-content: center;" class="empty"
						v-if="shopProductData.get && !shopProductData.list.length">
						<u-empty :text="$t('media.noProduct')"></u-empty>
					</view>
				</view>
			</u-popup>
			<u-popup class="video-type-pop" v-model="typeShow" closeable mode="bottom" max-height="56%"
				safe-area-inset-bottom :border-radius="35">
				<view class="video-type">
					<u-checkbox-group @change="checkboxGroupChange">
						<u-checkbox @change="checkboxChange" v-model="item.checked"
							v-for="(item, index) in videoType.list" :key="index"
							:name="item.name">{{item.name}}</u-checkbox>
					</u-checkbox-group>
				</view>
			</u-popup>
			<promptDialog ref="promptDialog"></promptDialog>
		</view>
		<!-- </c-layout> -->
	</view>
</template>

<script>
	//#ifdef APP-PLUS
	const txVideo = uni.requireNativePlugin('TX-Video');
	//#endif
	export default {
		data() {
			return {
				//搜索
				search: {
					navThmen: 'line',
					navType: 'navBackTitle',
					title: "Upload Video"
				},
				uploading: false,
				videoLocalPath: '',
				coverLocalPath: '',
				videoLocalType: '',
				coverLocalType: '',
				desc: '',
				successShow: false,
				// 视频最后结果
				videoRecordData: {},
				productPopup: false,
				shopProductData: {
					list: [],
					get: false,
				},
				postShopProductObj: {
					page: {
						size: 10,
						current: 1,
					},
					data: {
						shopId: '',
						userName: 'yj'
					}
				},
				videoScrollTop: '',
				jsonPath: '',
				videoType: { // 视频类型
					data: {
						"pageSize": 20,
						"pageNum": 1,
						"startTime": "",
						"endTime": "",
						"id": "",
						"name": ""
					},
					list: [],
					get: false
				},
				typeShow: false
			};
		},
		onLoad() {
			this.getShopProductData()
			// #ifdef APP-PLUS 
			this.getMusicAjax()
			// #endif
			this.getVideoTypesAjax()
		},
		computed: {
			cList() {
				return this.shopProductData.list.filter(f => f.checkShow)
			},
		},
		methods: {
			// 获取音乐
			getMusicAjax() {
				this.$u.post('/app/musicLibrary/selectAll', {
					"pageSize": 1000000,
					"pageNum": 1
				}).then(res => {
					const list = res.data.records.map(m => ({
						...m,
						name: m.title + (m.artist ? '-' + m.artist : ''),
						url: this.$u.file.getMedieUrl(m.audioUrl)
					}))
					// 获取音乐列表 并组装格式
					const music = {
						"bgm": {
							list
						}
					}
					this.saveFile(JSON.stringify(music))
				})
			},
			// 选择视频并上传
			videoChoose() {
				uni.chooseVideo({
					maxDuration: 60,
					success: (res) => {
						const tempFilePaths = res.tempFilePath;
						console.log("res:", tempFilePaths, res);
						this.videoLocalPath = tempFilePaths;
					},
					fail: (e) => {

						console.log('选择文件错误：', e);
					}
				})
			},
			// 删除视频
			deletevideo() {
				this.videoLocalPath = ''
			},
			// 选择商品
			checkGoods() {

			},
			submit() {
				uni.showLoading()
				if (!this.videoLocalPath) {
					this.$u.toast('请先选择文件')
					return
				}
				if (!this.desc) {
					this.$u.toast('请添加标题')
					return
				}
				this.uploading = true;
				// 记录操作
				const handle = async () => {

					if (!this.coverLocalPath) {
						// #ifdef H5
						const res = await this.getVideoPoster(this.videoLocalPath)
						this.blobToTempFilePath(res, (res1, res2) => {
							this.coverLocalPath = res1
							this.coverLocalType = res2
							console.log(this.coverLocalPath, 'pathBlob', );
						})
						// #endif
					}
					// videoRecordData 对象中有 coverPath 说明是录制的视频
					setTimeout(() => {
						try {
							// 记录要发送的请求 --- 上传的视频及
							const pFn = [this.$u.file.videoUpload({
								blob: this.videoLocalPath,
								type: '.' + (this.videoLocalType || 'mp4') // 设置类型 默认mp4
							}, 'short_video'), ]
							if (this.coverLocalPath) {
								pFn.push(this.$u.file.videoUpload({
										blob: this.coverLocalPath,
										type: '.' + (this.coverLocalType || 'png') // 设置类型 默认png
									},
									'short_video_cover'))
							}
							Promise.all(pFn).then((res) => {
								console.log(res, '上传置腾讯云');
								console.log(this.videoType.list);
								const params = {
									"title": this.desc,
									"url": res[0].fileName,
									"img": this.publicJS.tryGet(() => res[1].fileName) || '',
									"shopGoodsInfoId": this.cList.map(m => m.id),
									"categoryId": this.publicJS.tryGet(() => this.videoType
											.list.filter(f => f.checked).map(m => m.id)) ||
										null
								}

								console.log('只传递一个类型，节后来改，我山哥说的！！！！！默认选中的第一个');
								this.$u.post('/app/short/video/insert', params).then((res) => {
									this.videoType.list = this.videoType.list.map(m => ({
										...m,
										checked: false
									}))
									this.uploading = false;
									uni.hideLoading()
									this.$u.toast(res.msg)
									setTimeout(() => {
										this.publicJS.backOption()
									}, 500)
								}).catch((error) => {
									this.uploading = false;
								})
							}).
							catch((err) => {
								console.log('err:', err)
								this.uploading = false;
								uni.hideLoading()
							})
						} catch (e) {
							console.log('err:', e)
							this.uploading = false;
							uni.hideLoading()
						}
					}, 50)
				}
				handle()
			},
			// 视频录制
			videoRecord() {
				this.record()
			},
			record() {
				console.log(this.vuex_app_config, 'appconfig', this.path);
				console.log(this.path, 'this.path');
				txVideo.setLicence({
					licenceURL: 'https://license.vod2.myqcloud.com/license/v2/1305951302_1/v_cube.license' || this
						.vuex_app_config.txCloudLicenceUrl,
					key: 'a3cb9f331f77861c3a29984f76928a91' || this.vuex_app_config.txCloudLicenceKey
				})
				txVideo.record({
					"showMusicOption": true,
					"edit": false,
					"ratio": "VIDEO_ASPECT_RATIO_9_16",
					"quality": "standard",
					// 'https://live-mall-1319905095.cos.ap-singapore.myqcloud.com/short_video/1694138180672.json'
					// uni.publicJS.tryGet(() => path.join(__dirname, '../../static/js/music.json'))
					"musicAddress": this.path,
					"min": 1,
					"max": 20,
				}, (result, b, c) => {
					const videoPath = 'file://' + result.videoPath
					const coverPath = 'file://' + result.coverPath
					this.videoLocalPath = videoPath
					this.coverLocalPath = coverPath
					this.videoLocalType = videoPath.split('.').pop()
					this.coverLocalType = coverPath.split('.').pop()
					console.log(this.videoLocalType, this.coverLocalType, result, b, c);
				});

			},
			// blob转 这个blob开头的可访问资源的地址
			blobToTempFilePath(file, success, fail) {
				// 字符串则走 base64解析
				if (typeof file === 'string') {
					// 转为blob 对象创建临时地址
					const blob = this.base64ToUint8Array(file)
					const blobUrl = URL.createObjectURL(blob)
					success(blobUrl, blob.type.split('/')[1])
				} else {
					success(URL.createObjectURL(file), file.type.split('/')[1])
				}
			},
			// 获取首帧 
			getVideoPoster(url) {
				return new Promise(function(resolve, reject) {
					let video = document.createElement('video')
					video.setAttribute('crossOrigin',
						'anonymous') // 处理跨域，H5需后台支持，请求的视频资源响应投标需有Access-Control-Allow-Origin
					video.setAttribute('src', url)
					video.setAttribute('width', 400)
					video.setAttribute('height', 400)
					video.setAttribute('preload', 'auto')
					// uni.chooseVideo选择视频，当选用手机拍摄的视频时，地址是相对地址，如 _doc/uniapp_temp_1650594368317/camera/1650594390147.mp4
					// 可播放，但是loadeddata一直不执行，会触发error事件，视频加载失败
					// 应先转换成本地地址
					video.addEventListener('loadeddata', function() {
						console.log('视频第一帧加载完')
						let canvas = document.createElement('canvas')
						let width = video.width // canvas的尺寸和图片一样
						let height = video.height
						canvas.width = width
						canvas.height = height
						canvas.getContext('2d').drawImage(video, 0, 0, width, height) // 绘制canvas
						const dataURL = canvas.toDataURL('image/jpeg') // 转换为base64
						console.log('getVideoPoster-dataURL', dataURL.slice(0, 16))
						resolve(dataURL)
					})

					video.addEventListener('error', err => {
						console.log('视频加载失败', err)
						reject(err)
					})
				})
			},
			async getAllPoster(newVal, oldVal, owner, instance) {
				console.log('执行getAllPoster')
				// renderjs中，监听的属性videos是一个数组，存放的是选取的视频信息     
				// 删除，或updateVideos更新后（长度一样）
				if (newVal.length <= oldVal.length) return
				// 有默认值或添加时
				const newList = []
				for (const item of newVal) {
					// 已获取视频封面的不再重复获取
					if (item.posterUrl !== undefined) {
						newList.push({
							...item
						})
						continue
					}

					try {
						let url = item.url
						// 拍摄视频：_doc/uniapp_temp_1650594368317/camera/1650594390147.mp4
						// 网络视频：https://
						// 本地视频：file://
						if (!item.url.includes('file://') && !item.url.includes('https://')) {
							// 将本地URL路径转换成平台绝对路径
							// 如输入url为“_doc/a.png”：
							// Android平台转换后的路径为“/storage/sdcard0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/doc/ａ.png”；
							// #ifdef APP-VUE
							url = 'file://' + plus.io.convertLocalFileSystemURL(item.url)
							// #endif   
						}
						const dataUrl = await this.getVideoPoster(url)
						newList.push({
							...item,
							posterUrl: dataUrl
						})
					} catch (err) {
						newList.push({
							...item
						})
					}
				}
				this.$ownerInstance.callMethod('updateVideos', newList)
			},
			madeFilePath(arrayBuffer) {
				// 引入文件系统模块
				const fs = uni.getFileSystemManager();
				console.log(fs, 99999);
				// 创建一个临时文件路径
				const tempFilePath = `${fs.env.USER_DATA_PATH}/temp.txt`;

				try {
					// 将 ArrayBuffer 写入到临时文件中
					fs.writeFileSync(tempFilePath, new Uint8Array(arrayBuffer));

					// 获取生成的临时文件路径
					const filePath = uni.getRealPath({
						filePath: tempFilePath
					});
					console.log(filePath);
					return filePath
				} catch (err) {
					console.log(err);
				}
			},
			base64ToUint8Array(base64) {
				let audioSrc = base64; // 拼接最终的base64

				let arr = audioSrc.split(',');
				let array = arr[0].match(/:(.*?);/);
				let mime = (array && array.length > 1 ? array[1] : type) || type;
				// 去掉url的头，并转化为byte
				let bytes = window.atob(arr[1]);
				// 处理异常,将ascii码小于0的转换为大于0
				let ab = new ArrayBuffer(bytes.length);
				// 生成视图（直接针对内存）：8位无符号整数，长度1个字节
				let ia = new Uint8Array(ab);
				for (let i = 0; i < bytes.length; i++) {
					ia[i] = bytes.charCodeAt(i);
				}
				return new Blob([ab], {
					type: mime
				});
			},
			allCheck() {
				this.shopProductData.list = this.shopProductData.list.map(m => ({
					...m,
					check: true
				}))
			},
			// 确认
			addGoods() {
				this.shopProductData.list = this.shopProductData.list.map(m => ({
					...m,
					checkShow: m.check
				}))
				this.productPopup = false
			},
			// 获取商品
			async getShopProductData() {
				const res = await this.$u.post('/app/shopGoodsInfo/userpage', this.postShopProductObj)
				this.shopProductData.list = res.data.records
				this.shopProductData.get = true
			},
			cancel(data) {
				this.shopProductData.list = this.shopProductData.list.map(m => m.id === data.id ? {
					...m,
					check: false,
					checkShow: false
				} : m)
			},
			contentScroll(e) {
				this.videoScrollTop = this.publicJS.pxToRpx(e.detail.scrollTop) * 0.01
				// this.videoScrollTop = e.detail.scrollTop
				// = e.detail.scrollTop
				// console.log(e, this.videoScrollTop);
			},
			// 保存文件

			saveFile(data, success) {
				const that2 = this
				plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {
					// 在临时目录中创建一个临时文件，以时间戳命名
					var filePath = new Date().getTime() + '.json';
					var options = {
						create: true
					};
					fs.root.getFile(filePath, options, function(fileEntry) {
						console.log('创建临时文件成功，路径为：' + fileEntry.fullPath);
						// 写入数据
						fileEntry.createWriter(function(writer) {
							console.log('0.0.0.....');
							writer.write(data);
							that2.path = fileEntry.fullPath
							success && success(fileEntry.fullPath)
						}, function(error) {
							console.log('写入数据失败：' + error.message);
						});
					}, function(error) {
						console.log('创建临时文件失败：' + error);
					});
				}, function(error) {
					console.log('获取本地文件系统失败：' + error.message);
				});
				// plus.io.requestFileSystem(
				// 	plus.io.PUBLIC_DOCUMENTS, // 程序公用文档目录常量
				// 	fs => {
				// 		// 创建或打开文件, fs.root是根目录操作对象,直接fs表示当前操作对象
				// 		fs.root.getFile('serverURL.json', {
				// 			create: true // 文件不存在则创建
				// 		}, fileEntry => {
				// 			console.log(fileEntry, 'fileEntry');
				// 			// 文件在手机中的路径
				// 			//console.log(fileEntry.fullPath)
				// 			fileEntry.createWriter(writer => {
				// 				// 写入文件成功完成的回调函数
				// 				writer.onwrite = e => {
				// 					success(e)
				// 				};
				// 				// 向文件中写入数据
				// 				writer.write(data);
				// 			})
				// 		}, e => {
				// 			console.log("getFile failed: " + e.message);
				// 		});
				// 	},
				// 	e => {
				// 		console.log(e.message);
				// 	}
				// );
				// uni.saveFile({
				// 	tempFilePath: '../../static/imusic.json',
				// 	success: () {},
				// 	fail: () {},
				// })
			},
			delFile() {
				plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {
					fs.root.getFile(filePath, {}, function(fileEntry) {
						fileEntry.remove(function() {
							console.log('文件删除成功');
						}, function(error) {
							console.error('文件删除失败', error);
						});
					}, function() {
						console.error('获取文件失败');
					});
				}, function() {
					console.error('获取文件系统失败');
				});
			},

			submitSetURL() {

				// 请求本地文件系统对象，将服务器链接写入文件进行本地化保存
				plus.io.requestFileSystem(
					plus.io.PUBLIC_DOCUMENTS, // 程序公用文档目录常量
					fs => {
						// 创建或打开文件, fs.root是根目录操作对象,直接fs表示当前操作对象
						fs.root.getFile('serverURL.json', {
							create: true // 文件不存在则创建
						}, fileEntry => {
							// 文件在手机中的路径
							//console.log(fileEntry.fullPath)
							fileEntry.createWriter(writer => {
								// 写入文件成功完成的回调函数
								writer.onwrite = e => {};
								// 向文件中写入数据
								writer.write(JSON.stringify({
									URL: this.serverURL
								}));
							})
						}, e => {
							console.log("getFile failed: " + e.message);
						});
					},
					e => {
						console.log(e.message);
					}
				);
			},

			//读取服务器地址
			getServerURL: function() {
				let _this = this;
				let sURL = "";
				//从本地文件中读取服务器链接
				plus.io.requestFileSystem(
					plus.io.PUBLIC_DOCUMENTS,
					fs => {
						fs.root.getFile('serverURL.json', {
							create: false
						}, fileEntry => {
							fileEntry.file(function(file) {
								console.log("文件大小:" + file.size + '-- 文件名:' + file.name);
								//创建读取文件对象
								let fileReader = new plus.io.FileReader();
								//以文本格式读取文件数据内容
								fileReader.readAsText(file, 'utf-8');
								//文件读取操作完成时的回调函数
								fileReader.onloadend = function(evt) {
									sURL = JSON.parse(evt.target.result).URL;
									//console.log("提取的服务器地址:", sURL);
									_this.serverURL = sURL;
									Any.wsUrl = "wss://" + sURL + "/talkws";
									Any.httpUrl = "https://" + sURL + "/index.php/admin/";
									if (sURL != "") {
										_this.$refs.loginToast.show({
											title: '服务器地址获取成功！',
											type: 'success',
										});
									}
								}
							});
						}, e => {
							console.log("getFile failed: " + e.message);
						});
					},
					e => {
						console.log(e.message);
					}
				);
			},
			getVideoTypesAjax() {
				this.$u.post('/app/short/video/category/page', this.videoType.data).then(res => {
					this.videoType.list = res.data.records
					console.log(this.videoType.list);
				})
			},
			checkboxGroupChange() {},
			checkboxChange() {},
		},
	}
</script>

<style lang="scss" scoped>
	.upload-media-page {
		overflow: hidden auto;

		/deep/ .video-type-pop {
			.u-drawer-content {
				// padding-top: 50rpx;
			}

			.video-type {
				padding: 50rpx;

				.u-checkbox {
					flex: initial !important;
					line-height: normal;
				}
			}
		}

		.box {
			display: flex;
			flex-direction: column;
			position: relative;

			.video-view {
				background-color: rgb(247, 248, 250);
				padding: 40rpx;

				.video-card {
					background: #E1E4E8;
					border-radius: 30rpx;
					height: calc((100vw - 80rpx) / 2);
					overflow: hidden;

					.uploaddiv {
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: 32rpx;
						width: 100%;
						height: 100%;

						.upload {
							width: 50rpx;
							height: 50rpx;
						}
					}

					.video-play {
						position: relative;
						width: 100%;
						height: 100%;

						.video {
							width: 100%;
							height: 100%;
						}

						.icon {
							position: absolute;
							right: 20rpx;
							top: 20rpx;
							z-index: 109999;
						}
					}
				}
			}

			.video-tag {
				display: flex;
				flex-wrap: wrap;
				padding: 20rpx;

				.tag {
					min-width: 100rpx;
					line-height: 40rpx;
					padding: 0 6rpx;
					margin-left: 10rpx;
					border: 2rpx solid #ccc;
					border-radius: 8rpx;
					color: #333;
					margin-top: 10rpx;
					padding: 0 20rpx;

					&[type="dotted"] {
						border-style: dashed;
					}
				}
			}

			.text-area {
				color: #999CAD;
				font-size: 26rpx;
				padding: 0 40rpx;

				.saySomeThing {
					padding: 60rpx 0;

					/deep/ .uni-textarea-textarea {
						border-bottom: 2rpx solid #E1E4E8;
					}
				}

				.p-b-6 {
					padding-bottom: 60rpx;
					display: inline-block;
				}

				.uploaddiv {
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.button-b {
				background: #fff;
				width: 100%;
				padding: 40rpx;

				uni-button {
					width: 100%;
					height: 120rpx;
					background: #2934D0;
					border-radius: 20rpx;
				}

			}
		}

		.product-box {
			padding: 20rpx;

			.product+.product {
				margin-top: 20rpx;
			}

			.product {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				padding: 20rpx;
				height: 200rpx;
				background: #FFFFFF;
				border-radius: 26rpx 26rpx 26rpx 26rpx;
				opacity: 1;
				border: 2rpx solid #E1E8E8;

				.left {
					display: flex;
					width: calc(100% - 10rpx);

					.text {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 10rpx;
						font-size: 24rpx;
						color: #91909A;
						width: calc(100% - 170rpx);

						view {
							&:nth-child(1) {
								font-size: 28rpx;
								color: #1B1D29;

							}

						}
					}
				}

				.u-btn {
					width: 210rpx;
					height: 52rpx;
					background: #2934D0;
					border-radius: 26rpx 26rpx 26rpx 26rpx;
					opacity: 1;
					color: #fff;
				}
			}
		}

		.product-popup {
			padding: 80rpx 30rpx 30rpx 30rpx;
			display: flex;
			flex-direction: column;
			min-height: 100%;

			.select {
				margin-bottom: 20rpx;

				u-btn {
					margin: 0;
				}
			}

			.check-box {
				width: 100%;
				display: flex;
				position: relative;

				.u-checkbox {
					top: 30rpx;
					right: 0rpx;
					position: absolute;
				}
			}

			.product {
				display: flex;
				justify-content: space-between;
				padding: 22rpx 80rpx 22rpx 22rpx;
				border: 2rpx solid #E1E8E8;
				border-radius: 28rpx;
				margin-bottom: 20rpx;
				width: 100%;

				.right {
					width: calc(100% - 200rpx);
					font-size: 16px;
					color: #6A6A6A;
					padding: 2px 0;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.name {
						font-size: 19px;
						color: #02010E;

					}

					.intro {}
				}
			}
		}

		.remove {
			overflow: hidden; //超出隐藏
			text-overflow: ellipsis; //溢出显示省略号
			white-space: normal; //常规默认，会折行
			display: -webkit-box;
			-webkit-box-orient: vertical; //子元素排列 vertical（竖排）orhorizontal（横排）
			-webkit-line-clamp: 2;
			word-break: break-all;
			/*内容限制的行数 需要几行写几就行*/
		}

	}
</style>